<template>
    <div>
        <!-- 添加公告表格 -->
        <el-dialog title="添加公告" :visible.sync="tianjiaVisible">
            <el-form :model="form">
                <el-form-item label="内容">
                    <mavon-editor v-model="form.content"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tianjiagonggao">确 定</el-button>
            </div>
            </el-dialog>
        <el-button class="tianjia" type="success" @click="tianjiaVisible=true">添加公告</el-button>
        <!-- 删除公告弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="deVisible"
            width="30%">
            <span>确定删除这个公告吗</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="deletenotice()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑公告弹窗 -->
        <el-dialog title="编辑公告" :visible.sync="editnoticeVisible" width="35%">
            <mavon-editor v-model="editcontent"/>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editnotice">确 定</el-button>
            </div>
        </el-dialog>
        <div class="gonggao" v-for="i in gong" :key="i.id">
            <div><span v-if="i.ahead==1">置顶</span></div>
            <div><article v-html="i.content" ></article></div>
            <h2>{{i.people}}</h2>
            <h3>{{i.time}}</h3>
            <span slot="footer" class="dialog-footer">
                <el-button class="bianji" @click="makesureedit(i.content,i.id,i.people)">编辑</el-button>
                <el-button type="primary" v-if="i.ahead==0" class="zhi" @click="topping(i.id)">置顶</el-button>
                <el-button type="info" v-if="i.ahead==1" class="zhi" @click="canceltopping(i.id)">取消置顶</el-button>
                <el-button type="danger" class="shanchu" @click="makesurede(i.id)" >删除公告</el-button>
            </span>
            
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            //公告数据
            gong:[
                
            ],
            //添加公告
            tianjiaVisible:false,
            //添加公告
            form:{
                content:'',
                people:''
            },
            //删除公告的弹窗
            deVisible:false,
            deid:'',
            //编辑公告
            editnoticeVisible:false,
            editpeople:'',
            editid:'',
            editcontent:''
        }
    },
    methods:{
        //获得所有公告
        getnotic(){
            this.$axios.post('/notice/findAllNotice',{}).then((res)=>{
                console.log(res);
                res.data.result.forEach(i => {
                    this.gong.push(i);
                });
                this.gong.forEach(g=>{
                let newtime = g.time.substring(0,10) +' '+g.time.substring(11,19);
                g.time = newtime;
                })
            })
            
        },
        //添加公告
        tianjiagonggao(){
            let people = sessionStorage.getItem('username');
            this.$axios.post('/notice/addNotice',{
                people:people,
                content:this.form.content
            }).then(()=>{
                this.$router.go(0)
            })
            this.tianjiaVisible=false;
        },
        //删除公告
        makesurede(id){
            this.deVisible = true;
            this.deid = id
        },
        deletenotice(){
            this.$axios.post('/notice/deleteOneNotice',{id:this.deid}).then(()=>{
                this.$router.go(0)
            })
        },
        //置顶公告
        topping(id){
            this.$axios.post('/notice/ahead',{id:id}).then(()=>{
                this.$router.go(0);
            })
        },
        canceltopping(id){
            this.$axios.post('/notice/aheadCancel',{id:id}).then(()=>{
                this.$router.go(0);
            })
        },
        //编辑公告
        editnotice(){
            this.$axios.post('/noticetwo/updataNoticetwo',{
                id:this.editid,
                people:this.editpeople,
                content:this.editcontent
            }).then(()=>{
                this.$router.go(0);
            })
        },
        makesureedit(content,id,people){
            this.editid = id;
            this.editcontent = content;
            this.editpeople = people;
            this.editnoticeVisible = true;
        }

    },
    //生命周期函数
    created(){
        this.getnotic();
    }
}
</script>

<style scoped>
    .gonggao{
        width: 80%;
        height: 150px;
        background-color: #ffffff;
        margin: 20px auto;
        border-radius:  3px;
        text-align: left;
        position: relative;
        border: 1px solid transparent;
        padding: 25px;
        display: flex;
    }
    .gonggao div{
        display: flex;
        text-align: left;
        text-indent: 2em;
        white-space: pre-wrap;
        margin-left: 1%;
    }
    .gonggao:first-child{
        margin-right: 5px;
    }
    .gonggao div span{
        display: inline-block;
        background-color: #00cafc;
        width: 35px;
        text-indent: 0;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        height: 30px;
        color: white;
        line-height: 30px;
        border-radius: 3px;
    }
    .gonggao h2{
        position: absolute;
        bottom: 25px;
        left: 3%;
        font-size: 16px;
        font-weight: 200;
        color: #9da0ab;
    }
    .gonggao h3{
        position: absolute;
        bottom: 25px;
        left: 10%;
        font-size: 14px;
        font-weight: 200;
        color: #898d9b;
    }
    .tianjia{
        position: relative;
        left: -38%;
    }
    .dialog-footer{
        position: absolute;
        right:25px;
        bottom: 25px;
    }
    @media screen and (max-width :900px) {
        .dialog-footer{
            display: none;
        }
        .gonggao h3{
            display: none;
        }
    }
    @media screen and (max-width :1300px) {
        .gonggao h3{
            display: none;
        }
    }
</style>